:root{
    --unitlenth: calc(100% / 24);
    --gapless:calc( calc(100% + var(--gap)) / 24);
    --gap:0px;
}
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}


/*非响应式*/
body .row > .col-narrow{
    width: max-content;
}
.justify-start{
    justify-content: flex-start;
}
.justify-center{
    justify-content: center;
}
.justify-end{
    justify-content: flex-end;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.justify-evenly{
    justify-content: space-evenly;
}
.align-start{
    align-items: flex-start;
}
.align-center{
    align-items: center;
}
.align-end{
    align-items: flex-end;
}
.align-self-start{
    align-self: flex-start;
}
.align-self-center{
    align-self: center;
}
.align-self-end{
    align-self: flex-end;
}
.gutter-4{
    gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-8{
    gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-12{
    gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-16{
    gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-20{
    gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-24{
    gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-28{
    gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-32{
    gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-4{
    column-gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-8{
    column-gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-12{
    column-gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-16{
    column-gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-20{
    column-gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-24{
    column-gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-28{
    column-gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-32{
    column-gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-4{
    row-gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-8{
    row-gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-12{
    row-gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-16{
    row-gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-20{
    row-gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-24{
    row-gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-28{
    row-gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-32{
    row-gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.row > .col-1,
.row > .col-2,
.row > .col-3,
.row > .col-4,
.row > .col-5,
.row > .col-6,
.row > .col-7,
.row > .col-8,
.row > .col-9,
.row > .col-10,
.row > .col-11,
.row > .col-12,
.row > .col-13,
.row > .col-14,
.row > .col-15,
.row > .col-16,
.row > .col-17,
.row > .col-18,
.row > .col-19,
.row > .col-20,
.row > .col-21,
.row > .col-22,
.row > .col-23,
.row > .col-24{
    flex: none;
    min-width: 0;
}
.row > .col-1{
    flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
}
.row > .col-2{
    flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
}
.row > .col-3{
    flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
}
.row > .col-4{
    flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
}
.row > .col-5{
    flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
}
.row > .col-6{
    flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
}
.row > .col-7{
    flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
}
.row > .col-8{
    flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
}
.row > .col-9{
    flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
}
.row > .col-10{
    flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
}
.row > .col-11{
    flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
}
.row > .col-12{
    flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
}
.row > .col-13{
    flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
}
.row > .col-14{
    flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
}
.row > .col-15{
    flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
}
.row > .col-16{
    flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
}
.row > .col-17{
    flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
}
.row > .col-18{
    flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
}
.row > .col-19{
    flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
}
.row > .col-20{
    flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
}
.row > .col-21{
    flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
}
.row > .col-22{
    flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
}
.row > .col-23{
    flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
}
.row > .col-24{
    flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
}
.row > .offset-1{
    margin-left:calc(var(--unitlenth) * 1 );
}
.row > .offset-2{
    margin-left:calc(var(--unitlenth) * 2);
}
.row > .offset-3{
    margin-left:calc(var(--unitlenth) * 3 );
}
.row > .offset-4{
    margin-left:calc(var(--unitlenth) * 4 );
}
.row > .offset-5{
    margin-left:calc(var(--unitlenth) * 5 );
}
.row > .offset-6{
    margin-left:calc(var(--unitlenth) * 6 );
}
.row > .offset-7{
    margin-left:calc(var(--unitlenth) * 7 );
}
.row > .offset-8{
    margin-left:calc(var(--unitlenth) * 8 );
}
.row > .offset-9{
    margin-left:calc(var(--unitlenth) * 9 );
}
.row > .offset-10{
    margin-left:calc(var(--unitlenth) * 10);
}
.row > .offset-11{
    margin-left:calc(var(--unitlenth) * 11);
}
.row > .offset-12{
    margin-left:calc(var(--unitlenth) * 12);
}
.row > .offset-13{
    margin-left:calc(var(--unitlenth) * 13);
}
.row > .offset-14{
    margin-left:calc(var(--unitlenth) * 14);
}
.row > .offset-15{
    margin-left:calc(var(--unitlenth) * 15);
}
.row > .offset-16{
    margin-left:calc(var(--unitlenth) * 16);
}
.row > .offset-17{
    margin-left:calc(var(--unitlenth) * 17);
}
.row > .offset-18{
    margin-left:calc(var(--unitlenth) * 18);
}
.row > .offset-19{
    margin-left:calc(var(--unitlenth) * 19);
}
.row > .offset-20{
    margin-left:calc(var(--unitlenth) * 20);
}
.row > .offset-21{
    margin-left:calc(var(--unitlenth) * 21);
}
.row > .offset-22{
    margin-left:calc(var(--unitlenth) * 22);
}
.row > .offset-23{
    margin-left:calc(var(--unitlenth) * 23);
}
.row > .push-1,
.row > .push-2,
.row > .push-3,
.row > .push-4,
.row > .push-5,
.row > .push-6,
.row > .push-7,
.row > .push-8,
.row > .push-9,
.row > .push-10,
.row > .push-11,
.row > .push-12,
.row > .push-13,
.row > .push-14,
.row > .push-15,
.row > .push-16,
.row > .push-17,
.row > .push-18,
.row > .push-19,
.row > .push-20,
.row > .push-21,
.row > .push-22,
.row > .push-23{
    position: relative;
}
.row > .push-1{
    left: calc(var(--unitlenth) * 1 );
}
.row > .push-2{
    left: calc(var(--unitlenth) * 2 );
}
.row > .push-3{
    left: calc(var(--unitlenth) * 3 );
}
.row > .push-4{
    left: calc(var(--unitlenth) * 4 );
}
.row > .push-5{
    left: calc(var(--unitlenth) * 5 );
}
.row > .push-6{
    left: calc(var(--unitlenth) * 6 );
}
.row > .push-7{
    left: calc(var(--unitlenth) * 7 );
}
.row > .push-8{
    left: calc(var(--unitlenth) * 8 );
}
.row > .push-9{
    left: calc(var(--unitlenth) * 9 );
}
.row > .push-10{
    left: calc(var(--unitlenth) * 10 );
}
.row > .push-11{
    left: calc(var(--unitlenth) * 11 );
}
.row > .push-12{
    left: calc(var(--unitlenth) * 12 );
}
.row > .push-13{
    left: calc(var(--unitlenth) * 13 );
}
.row > .push-14{
    left: calc(var(--unitlenth) * 14 );
}
.row > .push-15{
    left: calc(var(--unitlenth) * 15 );
}
.row > .push-16{
    left: calc(var(--unitlenth) * 16 );
}
.row > .push-17{
    left: calc(var(--unitlenth) * 17 );
}
.row > .push-18{
    left: calc(var(--unitlenth) * 18 );
}
.row > .push-19{
    left: calc(var(--unitlenth) * 19 );
}
.row > .push-20{
    left: calc(var(--unitlenth) * 20 );
}
.row > .push-21{
    left: calc(var(--unitlenth) * 21 );
}
.row > .push-22{
    left: calc(var(--unitlenth) * 22 );
}
.row > .push-23{
    left: calc(var(--unitlenth) * 23 );
}
.row > .pull-1,
.row > .pull-2,
.row > .pull-3,
.row > .pull-4,
.row > .pull-5,
.row > .pull-6,
.row > .pull-7,
.row > .pull-8,
.row > .pull-9,
.row > .pull-10,
.row > .pull-11,
.row > .pull-12,
.row > .pull-13,
.row > .pull-14,
.row > .pull-15,
.row > .pull-16,
.row > .pull-17,
.row > .pull-18,
.row > .pull-19,
.row > .pull-20,
.row > .pull-21,
.row > .pull-22,
.row > .pull-23{
    position: relative;
}
.row > .pull-1{
    right: calc(var(--unitlenth) * 1);
}
.row > .pull-2{
    right: calc(var(--unitlenth) * 2);
}
.row > .pull-3{
    right: calc(var(--unitlenth) * 3);
}
.row > .pull-4{
    right: calc(var(--unitlenth) * 4);
}
.row > .pull-5{
    right: calc(var(--unitlenth) * 5);
}
.row > .pull-6{
    right: calc(var(--unitlenth) * 6);
}
.row > .pull-7{
    right: calc(var(--unitlenth) * 7);
}
.row > .pull-8{
    right: calc(var(--unitlenth) * 8);
}
.row > .pull-9{
    right: calc(var(--unitlenth) * 9);
}
.row > .pull-10{
    right: calc(var(--unitlenth) * 10);
}
.row > .pull-11{
    right: calc(var(--unitlenth) * 11);
}
.row > .pull-12{
    right: calc(var(--unitlenth) * 12);
}
.row > .pull-13{
    right: calc(var(--unitlenth) * 13);
}
.row > .pull-14{
    right: calc(var(--unitlenth) * 14);
}
.row > .pull-15{
    right: calc(var(--unitlenth) * 15);
}
.row > .pull-16{
    right: calc(var(--unitlenth) * 16);
}
.row > .pull-17{
    right: calc(var(--unitlenth) * 17);
}
.row > .pull-18{
    right: calc(var(--unitlenth) * 18);
}
.row > .pull-19{
    right: calc(var(--unitlenth) * 19);
}
.row > .pull-20{
    right: calc(var(--unitlenth) * 20);
}
.row > .pull-21{
    right: calc(var(--unitlenth) * 21);
}
.row > .pull-22{
    right: calc(var(--unitlenth) * 22);
}
.row > .pull-23{
    right: calc(var(--unitlenth) * 23);
}
.row > .order-1{
    order: 1;
}
.row > .order-2{
    order: 2;
}
.row > .order-3{
    order: 3;
}
.row > .order-4{
    order: 4;
}
.row > .order-5{
    order: 5;
}
.row > .order-6{
    order: 6;
}
.row > .order-7{
    order: 7;
}
.row > .order-8{
    order: 8;
}
.row > .order-9{
    order: 9;
}
.row > .order-10{
    order: 10;
}
.row > .order-11{
    order: 11;
}
.row > .order-12{
    order: 12;
}
.row > .order-13{
    order: 13;
}
.row > .order-14{
    order: 14;
}
.row > .order-15{
    order: 15;
}
.row > .order-16{
    order: 16;
}
.row > .order-17{
    order: 17;
}
.row > .order-18{
    order: 18;
}
.row > .order-19{
    order: 19;
}
.row > .order-20{
    order: 20;
}
.row > .order-21{
    order: 21;
}
.row > .order-22{
    order: 22;
}
.row > .order-23{
    order: 23;
}
.row > .order-24{
    order: 24;
}


/*响应*/
.col{
    display: block;
}  
.row{
    display: block;
    flex-wrap: wrap;
}
.row.no-stackable{
    display: flex;
}
.row[class *="gutter"]>:not(:last-child) {
	margin-bottom : calc(var(--gap) * 1)
}
.row.no-stackable[class *="gutter"]>:not(:last-child) {
	margin-bottom : 0px;
}
.no-stackable > .col{
    flex-grow: 1;
    flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
}
body .row > .col-xs-narrow{
    width: max-content;
}

/*屏幕<576px时的对其方式，应用于flex*/
.justify-xs-start{
    justify-content: flex-start;
}
.justify-xs-center{
    justify-content: center;
}
.justify-xs-end{
    justify-content: flex-end;
}
.justify-xs-between{
    justify-content: space-between;
}
.justify-xs-around{
    justify-content: space-around;
}
.justify-xs-evenly{
    justify-content: space-evenly;
}
.align-xs-start{
    align-items: flex-start;
}
.align-xs-center{
    align-items: center;
}
.align-xs-end{
    align-items: flex-end;
}
/*屏幕<576px时item对其方式，应用于item*/
.align-self-xs-start{
    align-self: flex-start;
}
.align-self-xs-center{
    align-self: center;
}
.align-self-xs-end{
    align-self: flex-end;
}
/*屏幕<576px时的间隔*/

.gutter-xs-4{
    gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-8{
    gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-12{
    gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-16{
    gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-20{
    gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-24{
    gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-28{
    gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-xs-32{
    gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-4{
    column-gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-8{
    column-gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-12{
    column-gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-16{
    column-gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-20{
    column-gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-24{
    column-gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-28{
    column-gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-column-xs-32{
    column-gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-4{
    row-gap: 4px;
    --gap:4px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-8{
    row-gap: 8px;
    --gap:8px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-12{
    row-gap: 12px;
    --gap:12px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-16{
    row-gap: 16px;
    --gap:16px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-20{
    row-gap: 20px;
    --gap:20px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-24{
    row-gap: 24px;
    --gap:24px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-28{
    row-gap: 28px;
    --gap:28px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
.gutter-row-xs-32{
    row-gap: 32px;
    --gap:32px;
    --gapless:calc( calc(100% + var(--gap)) / 24);
}
/*屏幕<576px时的元素长度*/
.row > .col-xs-1,
.row > .col-xs-2,
.row > .col-xs-3,
.row > .col-xs-4,
.row > .col-xs-5,
.row > .col-xs-6,
.row > .col-xs-7,
.row > .col-xs-8,
.row > .col-xs-9,
.row > .col-xs-10,
.row > .col-xs-11,
.row > .col-xs-12,
.row > .col-xs-13,
.row > .col-xs-14,
.row > .col-xs-15,
.row > .col-xs-16,
.row > .col-xs-17,
.row > .col-xs-18,
.row > .col-xs-19,
.row > .col-xs-20,
.row > .col-xs-21,
.row > .col-xs-22,
.row > .col-xs-23,
.row > .col-xs-24{
    flex: none;
    min-width: 0;
}
.row > .col-xs-1{
    flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
}
.row > .col-xs-2{
    flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
}
.row > .col-xs-3{
    flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
}
.row > .col-xs-4{
    flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
}
.row > .col-xs-5{
    flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
}
.row > .col-xs-6{
    flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
}
.row > .col-xs-7{
    flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
}
.row > .col-xs-8{
    flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
}
.row > .col-xs-9{
    flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
}
.row > .col-xs-10{
    flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
}
.row > .col-xs-11{
    flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
}
.row > .col-xs-12{
    flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
}
.row > .col-xs-13{
    flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
}
.row > .col-xs-14{
    flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
}
.row > .col-xs-15{
    flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
}
.row > .col-xs-16{
    flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
}
.row > .col-xs-17{
    flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
}
.row > .col-xs-18{
    flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
}
.row > .col-xs-19{
    flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
}
.row > .col-xs-20{
    flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
}
.row > .col-xs-21{
    flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
}
.row > .col-xs-22{
    flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
}
.row > .col-xs-23{
    flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
}
.row > .col-xs-24{
    flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
}

/*屏幕<576px时的边距*/
.row > .offset-xs-1{
    margin-left:calc(var(--unitlenth) * 1 );
}
.row > .offset-xs-2{
    margin-left:calc(var(--unitlenth) * 2);
}
.row > .offset-xs-3{
    margin-left:calc(var(--unitlenth) * 3 );
}
.row > .offset-xs-4{
    margin-left:calc(var(--unitlenth) * 4 );
}
.row > .offset-xs-5{
    margin-left:calc(var(--unitlenth) * 5 );
}
.row > .offset-xs-6{
    margin-left:calc(var(--unitlenth) * 6 );
}
.row > .offset-xs-7{
    margin-left:calc(var(--unitlenth) * 7 );
}
.row > .offset-xs-8{
    margin-left:calc(var(--unitlenth) * 8 );
}
.row > .offset-xs-9{
    margin-left:calc(var(--unitlenth) * 9 );
}
.row > .offset-xs-10{
    margin-left:calc(var(--unitlenth) * 10);
}
.row > .offset-xs-11{
    margin-left:calc(var(--unitlenth) * 11);
}
.row > .offset-xs-12{
    margin-left:calc(var(--unitlenth) * 12);
}
.row > .offset-xs-13{
    margin-left:calc(var(--unitlenth) * 13);
}
.row > .offset-xs-14{
    margin-left:calc(var(--unitlenth) * 14);
}
.row > .offset-xs-15{
    margin-left:calc(var(--unitlenth) * 15);
}
.row > .offset-xs-16{
    margin-left:calc(var(--unitlenth) * 16);
}
.row > .offset-xs-17{
    margin-left:calc(var(--unitlenth) * 17);
}
.row > .offset-xs-18{
    margin-left:calc(var(--unitlenth) * 18);
}
.row > .offset-xs-19{
    margin-left:calc(var(--unitlenth) * 19);
}
.row > .offset-xs-20{
    margin-left:calc(var(--unitlenth) * 20);
}
.row > .offset-xs-21{
    margin-left:calc(var(--unitlenth) * 21);
}
.row > .offset-xs-22{
    margin-left:calc(var(--unitlenth) * 22);
}
.row > .offset-xs-23{
    margin-left:calc(var(--unitlenth) * 23);
}
/*屏幕<576px时的右偏移*/
.row > .push-xs-1,
.row > .push-xs-2,
.row > .push-xs-3,
.row > .push-xs-4,
.row > .push-xs-5,
.row > .push-xs-6,
.row > .push-xs-7,
.row > .push-xs-8,
.row > .push-xs-9,
.row > .push-xs-10,
.row > .push-xs-11,
.row > .push-xs-12,
.row > .push-xs-13,
.row > .push-xs-14,
.row > .push-xs-15,
.row > .push-xs-16,
.row > .push-xs-17,
.row > .push-xs-18,
.row > .push-xs-19,
.row > .push-xs-20,
.row > .push-xs-21,
.row > .push-xs-22,
.row > .push-xs-23{
    position: relative;
}
.row > .push-xs-1{
    left: calc(var(--unitlenth) * 1 );
}
.row > .push-xs-2{
    left: calc(var(--unitlenth) * 2 );
}
.row > .push-xs-3{
    left: calc(var(--unitlenth) * 3 );
}
.row > .push-xs-4{
    left: calc(var(--unitlenth) * 4 );
}
.row > .push-xs-5{
    left: calc(var(--unitlenth) * 5 );
}
.row > .push-xs-6{
    left: calc(var(--unitlenth) * 6 );
}
.row > .push-xs-7{
    left: calc(var(--unitlenth) * 7 );
}
.row > .push-xs-8{
    left: calc(var(--unitlenth) * 8 );
}
.row > .push-xs-9{
    left: calc(var(--unitlenth) * 9 );
}
.row > .push-xs-10{
    left: calc(var(--unitlenth) * 10 );
}
.row > .push-xs-11{
    left: calc(var(--unitlenth) * 11 );
}
.row > .push-xs-12{
    left: calc(var(--unitlenth) * 12 );
}
.row > .push-xs-13{
    left: calc(var(--unitlenth) * 13 );
}
.row > .push-xs-14{
    left: calc(var(--unitlenth) * 14 );
}
.row > .push-xs-15{
    left: calc(var(--unitlenth) * 15 );
}
.row > .push-xs-16{
    left: calc(var(--unitlenth) * 16 );
}
.row > .push-xs-17{
    left: calc(var(--unitlenth) * 17 );
}
.row > .push-xs-18{
    left: calc(var(--unitlenth) * 18 );
}
.row > .push-xs-19{
    left: calc(var(--unitlenth) * 19 );
}
.row > .push-xs-20{
    left: calc(var(--unitlenth) * 20 );
}
.row > .push-xs-21{
    left: calc(var(--unitlenth) * 21 );
}
.row > .push-xs-22{
    left: calc(var(--unitlenth) * 22 );
}
.row > .push-xs-23{
    left: calc(var(--unitlenth) * 23 );
}
/*屏幕<576px时的左偏移*/
.row > .pull-xs-1,
.row > .pull-xs-2,
.row > .pull-xs-3,
.row > .pull-xs-4,
.row > .pull-xs-5,
.row > .pull-xs-6,
.row > .pull-xs-7,
.row > .pull-xs-8,
.row > .pull-xs-9,
.row > .pull-xs-10,
.row > .pull-xs-11,
.row > .pull-xs-12,
.row > .pull-xs-13,
.row > .pull-xs-14,
.row > .pull-xs-15,
.row > .pull-xs-16,
.row > .pull-xs-17,
.row > .pull-xs-18,
.row > .pull-xs-19,
.row > .pull-xs-20,
.row > .pull-xs-21,
.row > .pull-xs-22,
.row > .pull-xs-23{
    position: relative;
}
.row > .pull-xs-1{
    right: calc(var(--unitlenth) * 1);
}
.row > .pull-xs-2{
    right: calc(var(--unitlenth) * 2);
}
.row > .pull-xs-3{
    right: calc(var(--unitlenth) * 3);
}
.row > .pull-xs-4{
    right: calc(var(--unitlenth) * 4);
}
.row > .pull-xs-5{
    right: calc(var(--unitlenth) * 5);
}
.row > .pull-xs-6{
    right: calc(var(--unitlenth) * 6);
}
.row > .pull-xs-7{
    right: calc(var(--unitlenth) * 7);
}
.row > .pull-xs-8{
    right: calc(var(--unitlenth) * 8);
}
.row > .pull-xs-9{
    right: calc(var(--unitlenth) * 9);
}
.row > .pull-xs-10{
    right: calc(var(--unitlenth) * 10);
}
.row > .pull-xs-11{
    right: calc(var(--unitlenth) * 11);
}
.row > .pull-xs-12{
    right: calc(var(--unitlenth) * 12);
}
.row > .pull-xs-13{
    right: calc(var(--unitlenth) * 13);
}
.row > .pull-xs-14{
    right: calc(var(--unitlenth) * 14);
}
.row > .pull-xs-15{
    right: calc(var(--unitlenth) * 15);
}
.row > .pull-xs-16{
    right: calc(var(--unitlenth) * 16);
}
.row > .pull-xs-17{
    right: calc(var(--unitlenth) * 17);
}
.row > .pull-xs-18{
    right: calc(var(--unitlenth) * 18);
}
.row > .pull-xs-19{
    right: calc(var(--unitlenth) * 19);
}
.row > .pull-xs-20{
    right: calc(var(--unitlenth) * 20);
}
.row > .pull-xs-21{
    right: calc(var(--unitlenth) * 21);
}
.row > .pull-xs-22{
    right: calc(var(--unitlenth) * 22);
}
.row > .pull-xs-23{
    right: calc(var(--unitlenth) * 23);
}
/*屏幕<576px时的元素的位置*/
.row > .order-xs-1{
    order: 1;
}
.row > .order-xs-2{
    order: 2;
}
.row > .order-xs-3{
    order: 3;
}
.row > .order-xs-4{
    order: 4;
}
.row > .order-xs-5{
    order: 5;
}
.row > .order-xs-6{
    order: 6;
}
.row > .order-xs-7{
    order: 7;
}
.row > .order-xs-8{
    order: 8;
}
.row > .order-xs-9{
    order: 9;
}
.row > .order-xs-10{
    order: 10;
}
.row > .order-xs-11{
    order: 11;
}
.row > .order-xs-12{
    order: 12;
}
.row > .order-xs-13{
    order: 13;
}
.row > .order-xs-14{
    order: 14;
}
.row > .order-xs-15{
    order: 15;
}
.row > .order-xs-16{
    order: 16;
}
.row > .order-xs-17{
    order: 17;
}
.row > .order-xs-18{
    order: 18;
}
.row > .order-xs-19{
    order: 19;
}
.row > .order-xs-20{
    order: 20;
}
.row > .order-xs-21{
    order: 21;
}
.row > .order-xs-22{
    order: 22;
}
.row > .order-xs-23{
    order: 23;
}
.row > .order-xs-24{
    order: 24;
}




/*屏幕 ≥ 576px时的格式*/
@media screen and (min-width:576px){
    .row{
        display: flex;
    }
    .row[class *="gutter"]>:not(:last-child) {
        margin-bottom : 0px;
    }
    .row>:not([class *="col-sm-"]){
        width: 100%;
    }
    [class *="col-sm"]{
        flex:none;
    }
    body .row >div[class ~="col-sm-narrow"]{
        flex: none;
        width:max-content;
    }
    body  .row > .col-sm-narrow{
        width: max-content;
    }
/*屏幕≥ 576px时的对其方式应用于flex*/
    .justify-sm-start{
        justify-content: flex-start;
    }
    .justify-sm-center{
        justify-content: center;
    }
    .justify-sm-end{
        justify-content: flex-end;
    }
    .justify-sm-between{
        justify-content: space-between;
    }
    .justify-sm-around{
        justify-content: space-around;
    }
    .justify-sm-evenly{
        justify-content: space-evenly;
    }
    .align-sm-start{
        align-items: flex-start;
    }
    .align-sm-center{
        align-items: center;
    }
    .align-sm-end{
        align-items: flex-end;
    }
/*屏幕≥ 576px时item对其方式应用于item*/
    .align-self-sm-start{
        align-self: flex-start;
    }
    .align-self-sm-center{
        align-self: center;
    }
    .align-self-sm-end{
        align-self: flex-end;
    }
/*屏幕 ≥ 576px时的元素间隔*/
    .gutter-sm-4{
        gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-8{
        gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-12{
        gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-16{
        gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-20{
        gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-24{
        gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-28{
        gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-sm-32{
        gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-4{
        column-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-8{
        column-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-12{
        column-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-16{
        column-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-20{
        column-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-24{
        column-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-28{
        column-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-sm-32{
        column-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-4{
        row-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-8{
        row-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-12{
        row-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-16{
        row-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-20{
        row-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-24{
        row-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-28{
        row-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-sm-32{
        row-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
/*屏幕 ≥ 576px时的元素长度*/
    .row > .col-sm-1,
    .row > .col-sm-2,
    .row > .col-sm-3,
    .row > .col-sm-4,
    .row > .col-sm-5,
    .row > .col-sm-6,
    .row > .col-sm-7,
    .row > .col-sm-8,
    .row > .col-sm-9,
    .row > .col-sm-10,
    .row > .col-sm-11,
    .row > .col-sm-12,
    .row > .col-sm-13,
    .row > .col-sm-14,
    .row > .col-sm-15,
    .row > .col-sm-16,
    .row > .col-sm-17,
    .row > .col-sm-18,
    .row > .col-sm-19,
    .row > .col-sm-20,
    .row > .col-sm-21,
    .row > .col-sm-22,
    .row > .col-sm-23,
    .row > .col-sm-24{
        flex: none;
        min-width: 0;
    }
    .row > .col-sm-1{
        flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
    }
    .row > .col-sm-2{
        flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
    }
    .row > .col-sm-3{
        flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
    }
    .row > .col-sm-4{
        flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
    }
    .row > .col-sm-5{
        flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
    }
    .row > .col-sm-6{
        flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
    }
    .row > .col-sm-7{
        flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
    }
    .row > .col-sm-8{
        flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
    }
    .row > .col-sm-9{
        flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
    }
    .row > .col-sm-10{
        flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
    }
    .row > .col-sm-11{
        flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
    }
    .row > .col-sm-12{
        flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
    }
    .row > .col-sm-13{
        flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
    }
    .row > .col-sm-14{
        flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
    }
    .row > .col-sm-15{
        flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
    }
    .row > .col-sm-16{
        flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
    }
    .row > .col-sm-17{
        flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
    }
    .row > .col-sm-18{
        flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
    }
    .row > .col-sm-19{
        flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
    }
    .row > .col-sm-20{
        flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
    }
    .row > .col-sm-21{
        flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
    }
    .row > .col-sm-22{
        flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
    }
    .row > .col-sm-23{
        flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
    }
    .row > .col-sm-24{
        flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
    }
/*屏幕 ≥ 576px时的元素边距*/
    .row > .offset-sm-1{
        margin-left:calc(var(--unitlenth) * 1 );
    }
    .row > .offset-sm-2{
        margin-left:calc(var(--unitlenth) * 2);
    }
    .row > .offset-sm-3{
        margin-left:calc(var(--unitlenth) * 3 );
    }
    .row > .offset-sm-4{
        margin-left:calc(var(--unitlenth) * 4 );
    }
    .row > .offset-sm-5{
        margin-left:calc(var(--unitlenth) * 5 );
    }
    .row > .offset-sm-6{
        margin-left:calc(var(--unitlenth) * 6 );
    }
    .row > .offset-sm-7{
        margin-left:calc(var(--unitlenth) * 7 );
    }
    .row > .offset-sm-8{
        margin-left:calc(var(--unitlenth) * 8 );
    }
    .row > .offset-sm-9{
        margin-left:calc(var(--unitlenth) * 9 );
    }
    .row > .offset-sm-10{
        margin-left:calc(var(--unitlenth) * 10);
    }
    .row > .offset-sm-11{
        margin-left:calc(var(--unitlenth) * 11);
    }
    .row > .offset-sm-12{
        margin-left:calc(var(--unitlenth) * 12);
    }
    .row > .offset-sm-13{
        margin-left:calc(var(--unitlenth) * 13);
    }
    .row > .offset-sm-14{
        margin-left:calc(var(--unitlenth) * 14);
    }
    .row > .offset-sm-15{
        margin-left:calc(var(--unitlenth) * 15);
    }
    .row > .offset-sm-16{
        margin-left:calc(var(--unitlenth) * 16);
    }
    .row > .offset-sm-17{
        margin-left:calc(var(--unitlenth) * 17);
    }
    .row > .offset-sm-18{
        margin-left:calc(var(--unitlenth) * 18);
    }
    .row > .offset-sm-19{
        margin-left:calc(var(--unitlenth) * 19);
    }
    .row > .offset-sm-20{
        margin-left:calc(var(--unitlenth) * 20);
    }
    .row > .offset-sm-21{
        margin-left:calc(var(--unitlenth) * 21);
    }
    .row > .offset-sm-22{
        margin-left:calc(var(--unitlenth) * 22);
    }
    .row > .offset-sm-23{
        margin-left:calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 576px时的元素右移*/
    .row > .push-sm-1,
    .row > .push-sm-2,
    .row > .push-sm-3,
    .row > .push-sm-4,
    .row > .push-sm-5,
    .row > .push-sm-6,
    .row > .push-sm-7,
    .row > .push-sm-8,
    .row > .push-sm-9,
    .row > .push-sm-10,
    .row > .push-sm-11,
    .row > .push-sm-12,
    .row > .push-sm-13,
    .row > .push-sm-14,
    .row > .push-sm-15,
    .row > .push-sm-16,
    .row > .push-sm-17,
    .row > .push-sm-18,
    .row > .push-sm-19,
    .row > .push-sm-20,
    .row > .push-sm-21,
    .row > .push-sm-22,
    .row > .push-sm-23{
        position: relative;
    }
    .row > .push-sm-1{
        left: calc(var(--unitlenth) * 1 );
    }
    .row > .push-sm-2{
        left: calc(var(--unitlenth) * 2 );
    }
    .row > .push-sm-3{
        left: calc(var(--unitlenth) * 3 );
    }
    .row > .push-sm-4{
        left: calc(var(--unitlenth) * 4 );
    }
    .row > .push-sm-5{
        left: calc(var(--unitlenth) * 5 );
    }
    .row > .push-sm-6{
        left: calc(var(--unitlenth) * 6 );
    }
    .row > .push-sm-7{
        left: calc(var(--unitlenth) * 7 );
    }
    .row > .push-sm-8{
        left: calc(var(--unitlenth) * 8 );
    }
    .row > .push-sm-9{
        left: calc(var(--unitlenth) * 9 );
    }
    .row > .push-sm-10{
        left: calc(var(--unitlenth) * 10 );
    }
    .row > .push-sm-11{
        left: calc(var(--unitlenth) * 11 );
    }
    .row > .push-sm-12{
        left: calc(var(--unitlenth) * 12 );
    }
    .row > .push-sm-13{
        left: calc(var(--unitlenth) * 13 );
    }
    .row > .push-sm-14{
        left: calc(var(--unitlenth) * 14 );
    }
    .row > .push-sm-15{
        left: calc(var(--unitlenth) * 15 );
    }
    .row > .push-sm-16{
        left: calc(var(--unitlenth) * 16 );
    }
    .row > .push-sm-17{
        left: calc(var(--unitlenth) * 17 );
    }
    .row > .push-sm-18{
        left: calc(var(--unitlenth) * 18 );
    }
    .row > .push-sm-19{
        left: calc(var(--unitlenth) * 19 );
    }
    .row > .push-sm-20{
        left: calc(var(--unitlenth) * 20 );
    }
    .row > .push-sm-21{
        left: calc(var(--unitlenth) * 21 );
    }
    .row > .push-sm-22{
        left: calc(var(--unitlenth) * 22 );
    }
    .row > .push-sm-23{
        left: calc(var(--unitlenth) * 23 );
    }
    /*屏幕 ≥ 576px时的元素左移*/
    .row > .pull-sm-1,
    .row > .pull-sm-2,
    .row > .pull-sm-3,
    .row > .pull-sm-4,
    .row > .pull-sm-5,
    .row > .pull-sm-6,
    .row > .pull-sm-7,
    .row > .pull-sm-8,
    .row > .pull-sm-9,
    .row > .pull-sm-10,
    .row > .pull-sm-11,
    .row > .pull-sm-12,
    .row > .pull-sm-13,
    .row > .pull-sm-14,
    .row > .pull-sm-15,
    .row > .pull-sm-16,
    .row > .pull-sm-17,
    .row > .pull-sm-18,
    .row > .pull-sm-19,
    .row > .pull-sm-20,
    .row > .pull-sm-21,
    .row > .pull-sm-22,
    .row > .pull-sm-23{
        position: relative;
    }
    .row > .pull-sm-1{
        right: calc(var(--unitlenth) * 1);
    }
    .row > .pull-sm-2{
        right: calc(var(--unitlenth) * 2);
    }
    .row > .pull-sm-3{
        right: calc(var(--unitlenth) * 3);
    }
    .row > .pull-sm-4{
        right: calc(var(--unitlenth) * 4);
    }
    .row > .pull-sm-5{
        right: calc(var(--unitlenth) * 5);
    }
    .row > .pull-sm-6{
        right: calc(var(--unitlenth) * 6);
    }
    .row > .pull-sm-7{
        right: calc(var(--unitlenth) * 7);
    }
    .row > .pull-sm-8{
        right: calc(var(--unitlenth) * 8);
    }
    .row > .pull-sm-9{
        right: calc(var(--unitlenth) * 9);
    }
    .row > .pull-sm-10{
        right: calc(var(--unitlenth) * 10);
    }
    .row > .pull-sm-11{
        right: calc(var(--unitlenth) * 11);
    }
    .row > .pull-sm-12{
        right: calc(var(--unitlenth) * 12);
    }
    .row > .pull-sm-13{
        right: calc(var(--unitlenth) * 13);
    }
    .row > .pull-sm-14{
        right: calc(var(--unitlenth) * 14);
    }
    .row > .pull-sm-15{
        right: calc(var(--unitlenth) * 15);
    }
    .row > .pull-sm-16{
        right: calc(var(--unitlenth) * 16);
    }
    .row > .pull-sm-17{
        right: calc(var(--unitlenth) * 17);
    }
    .row > .pull-sm-18{
        right: calc(var(--unitlenth) * 18);
    }
    .row > .pull-sm-19{
        right: calc(var(--unitlenth) * 19);
    }
    .row > .pull-sm-20{
        right: calc(var(--unitlenth) * 20);
    }
    .row > .pull-sm-21{
        right: calc(var(--unitlenth) * 21);
    }
    .row > .pull-sm-22{
        right: calc(var(--unitlenth) * 22);
    }
    .row > .pull-sm-23{
        right: calc(var(--unitlenth) * 23);
    }
    /*屏幕 ≥ 576px时的元素位置*/
    .row > .order-sm-1{
        order: 1;
    }
    .row > .order-sm-2{
        order: 2;
    }
    .row > .order-sm-3{
        order: 3;
    }
    .row > .order-sm-4{
        order: 4;
    }
    .row > .order-sm-5{
        order: 5;
    }
    .row > .order-sm-6{
        order: 6;
    }
    .row > .order-sm-7{
        order: 7;
    }
    .row > .order-sm-8{
        order: 8;
    }
    .row > .order-sm-9{
        order: 9;
    }
    .row > .order-sm-10{
        order: 10;
    }
    .row > .order-sm-11{
        order: 11;
    }
    .row > .order-sm-12{
        order: 12;
    }
    .row > .order-sm-13{
        order: 13;
    }
    .row > .order-sm-14{
        order: 14;
    }
    .row > .order-sm-15{
        order: 15;
    }
    .row > .order-sm-16{
        order: 16;
    }
    .row > .order-sm-17{
        order: 17;
    }
    .row > .order-sm-18{
        order: 18;
    }
    .row > .order-sm-19{
        order: 19;
    }
    .row > .order-sm-20{
        order: 20;
    }
    .row > .order-sm-21{
        order: 21;
    }
    .row > .order-sm-22{
        order: 22;
    }
    .row > .order-sm-23{
        order: 23;
    }
    .row > .order-sm-24{
        order: 24;
    }
}




/*屏幕 ≥ 768px时的格式*/
@media screen and (min-width:768px){
    .row > :not([class *="col-md-"]){
        width: 100%;
    }
    [class *="col-md"]{
        flex: none;
        width: 100%; 
    }
    body .row >div[class ~="col-md-narrow"]{
        flex: none;
        width:max-content;
    }
    body .row > .col-md-narrow{
        width: max-content;
    }
/*屏幕 ≥ 768px时的对其方式应用于flex*/
    .justify-md-start{
        justify-content: flex-start;
    }
    .justify-md-center{
        justify-content: center;
    }
    .justify-md-end{
        justify-content: flex-end;
    }
    .justify-md-between{
        justify-content: space-between;
    }
    .justify-md-around{
        justify-content: space-around;
    }
    .justify-md-evenly{
        justify-content: space-evenly;
    }
    .align-md-start{
        align-items: flex-start;
    }
    .align-md-center{
        align-items: center;
    }
    .align-md-end{
        align-items: flex-end;
    }
/*屏幕 ≥ 768px时item对其方式应用于item*/
    .align-self-md-start{
        align-self: flex-start;
    }
    .align-self-md-center{
        align-self: center;
    }
    .align-self-md-end{
        align-self: flex-end;
    }
/*屏幕 ≥ 768px时的元素间隔*/
    .gutter-md-4{
        gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-8{
        gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-12{
        gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-16{
        gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-20{
        gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-24{
        gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-28{
        gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-md-32{
        gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-4{
        column-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-8{
        column-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-12{
        column-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-16{
        column-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-20{
        column-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-24{
        column-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-28{
        column-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-md-32{
        column-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-4{
        row-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-8{
        row-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-12{
        row-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-16{
        row-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-20{
        row-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-24{
        row-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-28{
        row-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-md-32{
        row-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
/*屏幕 ≥ 768px时的元素长度*/
    .row > .col-md-1,
    .row > .col-md-2,
    .row > .col-md-3,
    .row > .col-md-4,
    .row > .col-md-5,
    .row > .col-md-6,
    .row > .col-md-7,
    .row > .col-md-8,
    .row > .col-md-9,
    .row > .col-md-10,
    .row > .col-md-11,
    .row > .col-md-12,
    .row > .col-md-13,
    .row > .col-md-14,
    .row > .col-md-15,
    .row > .col-md-16,
    .row > .col-md-17,
    .row > .col-md-18,
    .row > .col-md-19,
    .row > .col-md-20,
    .row > .col-md-21,
    .row > .col-md-22,
    .row > .col-md-23,
    .row > .col-md-24{
        flex: none;
        min-width: 0;
    }
    .row > .col-md-1{
        flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
    }
    .row > .col-md-2{
        flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
    }
    .row > .col-md-3{
        flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
    }
    .row > .col-md-4{
        flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
    }
    .row > .col-md-5{
        flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
    }
    .row > .col-md-6{
        flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
    }
    .row > .col-md-7{
        flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
    }
    .row > .col-md-8{
        flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
    }
    .row > .col-md-9{
        flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
    }
    .row > .col-md-10{
        flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
    }
    .row > .col-md-11{
        flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
    }
    .row > .col-md-12{
        flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
    }
    .row > .col-md-13{
        flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
    }
    .row > .col-md-14{
        flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
    }
    .row > .col-md-15{
        flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
    }
    .row > .col-md-16{
        flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
    }
    .row > .col-md-17{
        flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
    }
    .row > .col-md-18{
        flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
    }
    .row > .col-md-19{
        flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
    }
    .row > .col-md-20{
        flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
    }
    .row > .col-md-21{
        flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
    }
    .row > .col-md-22{
        flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
    }
    .row > .col-md-23{
        flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
    }
    .row > .col-md-24{
        flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
    }
/*屏幕 ≥ 768px时的元素边距*/
    .row > .offset-md-1{
        margin-left:calc(var(--unitlenth) * 1 );
    }
    .row > .offset-md-2{
        margin-left:calc(var(--unitlenth) * 2);
    }
    .row > .offset-md-3{
        margin-left:calc(var(--unitlenth) * 3 );
    }
    .row > .offset-md-4{
        margin-left:calc(var(--unitlenth) * 4 );
    }
    .row > .offset-md-5{
        margin-left:calc(var(--unitlenth) * 5 );
    }
    .row > .offset-md-6{
        margin-left:calc(var(--unitlenth) * 6 );
    }
    .row > .offset-md-7{
        margin-left:calc(var(--unitlenth) * 7 );
    }
    .row > .offset-md-8{
        margin-left:calc(var(--unitlenth) * 8 );
    }
    .row > .offset-md-9{
        margin-left:calc(var(--unitlenth) * 9 );
    }
    .row > .offset-md-10{
        margin-left:calc(var(--unitlenth) * 10);
    }
    .row > .offset-md-11{
        margin-left:calc(var(--unitlenth) * 11);
    }
    .row > .offset-md-12{
        margin-left:calc(var(--unitlenth) * 12);
    }
    .row > .offset-md-13{
        margin-left:calc(var(--unitlenth) * 13);
    }
    .row > .offset-md-14{
        margin-left:calc(var(--unitlenth) * 14);
    }
    .row > .offset-md-15{
        margin-left:calc(var(--unitlenth) * 15);
    }
    .row > .offset-md-16{
        margin-left:calc(var(--unitlenth) * 16);
    }
    .row > .offset-md-17{
        margin-left:calc(var(--unitlenth) * 17);
    }
    .row > .offset-md-18{
        margin-left:calc(var(--unitlenth) * 18);
    }
    .row > .offset-md-19{
        margin-left:calc(var(--unitlenth) * 19);
    }
    .row > .offset-md-20{
        margin-left:calc(var(--unitlenth) * 20);
    }
    .row > .offset-md-21{
        margin-left:calc(var(--unitlenth) * 21);
    }
    .row > .offset-md-22{
        margin-left:calc(var(--unitlenth) * 22);
    }
    .row > .offset-md-23{
        margin-left:calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 768px时的元素右移*/
    .row > .push-md-1,
    .row > .push-md-2,
    .row > .push-md-3,
    .row > .push-md-4,
    .row > .push-md-5,
    .row > .push-md-6,
    .row > .push-md-7,
    .row > .push-md-8,
    .row > .push-md-9,
    .row > .push-md-10,
    .row > .push-md-11,
    .row > .push-md-12,
    .row > .push-md-13,
    .row > .push-md-14,
    .row > .push-md-15,
    .row > .push-md-16,
    .row > .push-md-17,
    .row > .push-md-18,
    .row > .push-md-19,
    .row > .push-md-20,
    .row > .push-md-21,
    .row > .push-md-22,
    .row > .push-md-23{
        position: relative;
    }
    .row > .push-md-1{
        left: calc(var(--unitlenth) * 1 );
    }
    .row > .push-md-2{
        left: calc(var(--unitlenth) * 2 );
    }
    .row > .push-md-3{
        left: calc(var(--unitlenth) * 3 );
    }
    .row > .push-md-4{
        left: calc(var(--unitlenth) * 4 );
    }
    .row > .push-md-5{
        left: calc(var(--unitlenth) * 5 );
    }
    .row > .push-md-6{
        left: calc(var(--unitlenth) * 6 );
    }
    .row > .push-md-7{
        left: calc(var(--unitlenth) * 7 );
    }
    .row > .push-md-8{
        left: calc(var(--unitlenth) * 8 );
    }
    .row > .push-md-9{
        left: calc(var(--unitlenth) * 9 );
    }
    .row > .push-md-10{
        left: calc(var(--unitlenth) * 10 );
    }
    .row > .push-md-11{
        left: calc(var(--unitlenth) * 11 );
    }
    .row > .push-md-12{
        left: calc(var(--unitlenth) * 12 );
    }
    .row > .push-md-13{
        left: calc(var(--unitlenth) * 13 );
    }
    .row > .push-md-14{
        left: calc(var(--unitlenth) * 14 );
    }
    .row > .push-md-15{
        left: calc(var(--unitlenth) * 15 );
    }
    .row > .push-md-16{
        left: calc(var(--unitlenth) * 16 );
    }
    .row > .push-md-17{
        left: calc(var(--unitlenth) * 17 );
    }
    .row > .push-md-18{
        left: calc(var(--unitlenth) * 18 );
    }
    .row > .push-md-19{
        left: calc(var(--unitlenth) * 19 );
    }
    .row > .push-md-20{
        left: calc(var(--unitlenth) * 20 );
    }
    .row > .push-md-21{
        left: calc(var(--unitlenth) * 21 );
    }
    .row > .push-md-22{
        left: calc(var(--unitlenth) * 22 );
    }
    .row > .push-md-23{
        left: calc(var(--unitlenth) * 23 );
    }
/*屏幕 ≥ 768px时的元素左移*/
    .row > .pull-md-1,
    .row > .pull-md-2,
    .row > .pull-md-3,
    .row > .pull-md-4,
    .row > .pull-md-5,
    .row > .pull-md-6,
    .row > .pull-md-7,
    .row > .pull-md-8,
    .row > .pull-md-9,
    .row > .pull-md-10,
    .row > .pull-md-11,
    .row > .pull-md-12,
    .row > .pull-md-13,
    .row > .pull-md-14,
    .row > .pull-md-15,
    .row > .pull-md-16,
    .row > .pull-md-17,
    .row > .pull-md-18,
    .row > .pull-md-19,
    .row > .pull-md-20,
    .row > .pull-md-21,
    .row > .pull-md-22,
    .row > .pull-md-23{
        position: relative;
    }
    .row > .pull-md-1{
        right: calc(var(--unitlenth) * 1);
    }
    .row > .pull-md-2{
        right: calc(var(--unitlenth) * 2);
    }
    .row > .pull-md-3{
        right: calc(var(--unitlenth) * 3);
    }
    .row > .pull-md-4{
        right: calc(var(--unitlenth) * 4);
    }
    .row > .pull-md-5{
        right: calc(var(--unitlenth) * 5);
    }
    .row > .pull-md-6{
        right: calc(var(--unitlenth) * 6);
    }
    .row > .pull-md-7{
        right: calc(var(--unitlenth) * 7);
    }
    .row > .pull-md-8{
        right: calc(var(--unitlenth) * 8);
    }
    .row > .pull-md-9{
        right: calc(var(--unitlenth) * 9);
    }
    .row > .pull-md-10{
        right: calc(var(--unitlenth) * 10);
    }
    .row > .pull-md-11{
        right: calc(var(--unitlenth) * 11);
    }
    .row > .pull-md-12{
        right: calc(var(--unitlenth) * 12);
    }
    .row > .pull-md-13{
        right: calc(var(--unitlenth) * 13);
    }
    .row > .pull-md-14{
        right: calc(var(--unitlenth) * 14);
    }
    .row > .pull-md-15{
        right: calc(var(--unitlenth) * 15);
    }
    .row > .pull-md-16{
        right: calc(var(--unitlenth) * 16);
    }
    .row > .pull-md-17{
        right: calc(var(--unitlenth) * 17);
    }
    .row > .pull-md-18{
        right: calc(var(--unitlenth) * 18);
    }
    .row > .pull-md-19{
        right: calc(var(--unitlenth) * 19);
    }
    .row > .pull-md-20{
        right: calc(var(--unitlenth) * 20);
    }
    .row > .pull-md-21{
        right: calc(var(--unitlenth) * 21);
    }
    .row > .pull-md-22{
        right: calc(var(--unitlenth) * 22);
    }
    .row > .pull-md-23{
        right: calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 768px时的元素位置*/
    .row > .order-md-1{
        order: 1;
    }
    .row > .order-md-2{
        order: 2;
    }
    .row > .order-md-3{
        order: 3;
    }
    .row > .order-md-4{
        order: 4;
    }
    .row > .order-md-5{
        order: 5;
    }
    .row > .order-md-6{
        order: 6;
    }
    .row > .order-md-7{
        order: 7;
    }
    .row > .order-md-8{
        order: 8;
    }
    .row > .order-md-9{
        order: 9;
    }
    .row > .order-md-10{
        order: 10;
    }
    .row > .order-md-11{
        order: 11;
    }
    .row > .order-md-12{
        order: 12;
    }
    .row > .order-md-13{
        order: 13;
    }
    .row > .order-md-14{
        order: 14;
    }
    .row > .order-md-15{
        order: 15;
    }
    .row > .order-md-16{
        order: 16;
    }
    .row > .order-md-17{
        order: 17;
    }
    .row > .order-md-18{
        order: 18;
    }
    .row > .order-md-19{
        order: 19;
    }
    .row > .order-md-20{
        order: 20;
    }
    .row > .order-md-21{
        order: 21;
    }
    .row > .order-md-22{
        order: 22;
    }
    .row > .order-md-23{
        order: 23;
    }
    .row > .order-md-24{
        order: 24;
    }
}



/*屏幕 ≥ 992px时的格式*/
@media screen and (min-width:992px){
    .row > :not([class *="col-lg"]){
        width: 100%;
    }
    [class *="col-lg"]{
        flex: none;
        
    }
    body .row >div[class ~="col-lg-narrow"]{
        flex: none;
        width:max-content;
    }
    body .row > .col-lg-narrow{
        width: max-content;
    }
/*屏幕 ≥ 992px时的对其方式应用于flex*/
    .justify-lg-start{
        justify-content: flex-start;
    }
    .justify-lg-center{
        justify-content: center;
    }
    .justify-lg-end{
        justify-content: flex-end;
    }
    .justify-lg-between{
        justify-content: space-between;
    }
    .justify-lg-around{
        justify-content: space-around;
    }
    .justify-lg-evenly{
        justify-content: space-evenly;
    }
    .align-lg-start{
        align-items: flex-start;
    }
    .align-lg-center{
        align-items: center;
    }
    .align-lg-end{
        align-items: flex-end;
    }
/*屏幕 ≥ 992px时item对其方式应用于item*/
    .align-self-lg-start{
        align-self: flex-start;
    }
    .align-self-lg-center{
        align-self: center;
    }
    .align-self-lg-end{
        align-self: flex-end;
    }
/*屏幕 ≥ 992px时的元素间隔*/
    .gutter-lg-4{
        gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-8{
        gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-12{
        gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-16{
        gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-20{
        gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-24{
        gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-28{
        gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-lg-32{
        gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-4{
        column-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-8{
        column-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-12{
        column-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-16{
        column-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-20{
        column-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-24{
        column-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-28{
        column-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-lg-32{
        column-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-4{
        row-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-8{
        row-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-12{
        row-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-16{
        row-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-20{
        row-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-24{
        row-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-28{
        row-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-lg-32{
        row-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
/*屏幕 ≥ 992px时的元素长度*/
    .row > .col-lg-1,
    .row > .col-lg-2,
    .row > .col-lg-3,
    .row > .col-lg-4,
    .row > .col-lg-5,
    .row > .col-lg-6,
    .row > .col-lg-7,
    .row > .col-lg-8,
    .row > .col-lg-9,
    .row > .col-lg-10,
    .row > .col-lg-11,
    .row > .col-lg-12,
    .row > .col-lg-13,
    .row > .col-lg-14,
    .row > .col-lg-15,
    .row > .col-lg-16,
    .row > .col-lg-17,
    .row > .col-lg-18,
    .row > .col-lg-19,
    .row > .col-lg-20,
    .row > .col-lg-21,
    .row > .col-lg-22,
    .row > .col-lg-23,
    .row > .col-lg-24{
        flex: none;
        min-width: 0;
    }
    .row > .col-lg-1{
        flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
    }
    .row > .col-lg-2{
        flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
    }
    .row > .col-lg-3{
        flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
    }
    .row > .col-lg-4{
        flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
    }
    .row > .col-lg-5{
        flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
    }
    .row > .col-lg-6{
        flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
    }
    .row > .col-lg-7{
        flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
    }
    .row > .col-lg-8{
        flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
    }
    .row > .col-lg-9{
        flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
    }
    .row > .col-lg-10{
        flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
    }
    .row > .col-lg-11{
        flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
    }
    .row > .col-lg-12{
        flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
    }
    .row > .col-lg-13{
        flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
    }
    .row > .col-lg-14{
        flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
    }
    .row > .col-lg-15{
        flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
    }
    .row > .col-lg-16{
        flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
    }
    .row > .col-lg-17{
        flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
    }
    .row > .col-lg-18{
        flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
    }
    .row > .col-lg-19{
        flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
    }
    .row > .col-lg-20{
        flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
    }
    .row > .col-lg-21{
        flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
    }
    .row > .col-lg-22{
        flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
    }
    .row > .col-lg-23{
        flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
    }
    .row > .col-lg-24{
        flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
    }
/*屏幕 ≥ 992px时的元素边距*/
    .row > .offset-lg-1{
        margin-left:calc(var(--unitlenth) * 1 );
    }
    .row > .offset-lg-2{
        margin-left:calc(var(--unitlenth) * 2);
    }
    .row > .offset-lg-3{
        margin-left:calc(var(--unitlenth) * 3 );
    }
    .row > .offset-lg-4{
        margin-left:calc(var(--unitlenth) * 4 );
    }
    .row > .offset-lg-5{
        margin-left:calc(var(--unitlenth) * 5 );
    }
    .row > .offset-lg-6{
        margin-left:calc(var(--unitlenth) * 6 );
    }
    .row > .offset-lg-7{
        margin-left:calc(var(--unitlenth) * 7 );
    }
    .row > .offset-lg-8{
        margin-left:calc(var(--unitlenth) * 8 );
    }
    .row > .offset-lg-9{
        margin-left:calc(var(--unitlenth) * 9 );
    }
    .row > .offset-lg-10{
        margin-left:calc(var(--unitlenth) * 10);
    }
    .row > .offset-lg-11{
        margin-left:calc(var(--unitlenth) * 11);
    }
    .row > .offset-lg-12{
        margin-left:calc(var(--unitlenth) * 12);
    }
    .row > .offset-lg-13{
        margin-left:calc(var(--unitlenth) * 13);
    }
    .row > .offset-lg-14{
        margin-left:calc(var(--unitlenth) * 14);
    }
    .row > .offset-lg-15{
        margin-left:calc(var(--unitlenth) * 15);
    }
    .row > .offset-lg-16{
        margin-left:calc(var(--unitlenth) * 16);
    }
    .row > .offset-lg-17{
        margin-left:calc(var(--unitlenth) * 17);
    }
    .row > .offset-lg-18{
        margin-left:calc(var(--unitlenth) * 18);
    }
    .row > .offset-lg-19{
        margin-left:calc(var(--unitlenth) * 19);
    }
    .row > .offset-lg-20{
        margin-left:calc(var(--unitlenth) * 20);
    }
    .row > .offset-lg-21{
        margin-left:calc(var(--unitlenth) * 21);
    }
    .row > .offset-lg-22{
        margin-left:calc(var(--unitlenth) * 22);
    }
    .row > .offset-lg-23{
        margin-left:calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 992px时的元素右移*/
    .row > .push-lg-1,
    .row > .push-lg-2,
    .row > .push-lg-3,
    .row > .push-lg-4,
    .row > .push-lg-5,
    .row > .push-lg-6,
    .row > .push-lg-7,
    .row > .push-lg-8,
    .row > .push-lg-9,
    .row > .push-lg-10,
    .row > .push-lg-11,
    .row > .push-lg-12,
    .row > .push-lg-13,
    .row > .push-lg-14,
    .row > .push-lg-15,
    .row > .push-lg-16,
    .row > .push-lg-17,
    .row > .push-lg-18,
    .row > .push-lg-19,
    .row > .push-lg-20,
    .row > .push-lg-21,
    .row > .push-lg-22,
    .row > .push-lg-23{
        position: relative;
    }
    .row > .push-lg-1{
        left: calc(var(--unitlenth) * 1 );
    }
    .row > .push-lg-2{
        left: calc(var(--unitlenth) * 2 );
    }
    .row > .push-lg-3{
        left: calc(var(--unitlenth) * 3 );
    }
    .row > .push-lg-4{
        left: calc(var(--unitlenth) * 4 );
    }
    .row > .push-lg-5{
        left: calc(var(--unitlenth) * 5 );
    }
    .row > .push-lg-6{
        left: calc(var(--unitlenth) * 6 );
    }
    .row > .push-lg-7{
        left: calc(var(--unitlenth) * 7 );
    }
    .row > .push-lg-8{
        left: calc(var(--unitlenth) * 8 );
    }
    .row > .push-lg-9{
        left: calc(var(--unitlenth) * 9 );
    }
    .row > .push-lg-10{
        left: calc(var(--unitlenth) * 10 );
    }
    .row > .push-lg-11{
        left: calc(var(--unitlenth) * 11 );
    }
    .row > .push-lg-12{
        left: calc(var(--unitlenth) * 12 );
    }
    .row > .push-lg-13{
        left: calc(var(--unitlenth) * 13 );
    }
    .row > .push-lg-14{
        left: calc(var(--unitlenth) * 14 );
    }
    .row > .push-lg-15{
        left: calc(var(--unitlenth) * 15 );
    }
    .row > .push-lg-16{
        left: calc(var(--unitlenth) * 16 );
    }
    .row > .push-lg-17{
        left: calc(var(--unitlenth) * 17 );
    }
    .row > .push-lg-18{
        left: calc(var(--unitlenth) * 18 );
    }
    .row > .push-lg-19{
        left: calc(var(--unitlenth) * 19 );
    }
    .row > .push-lg-20{
        left: calc(var(--unitlenth) * 20 );
    }
    .row > .push-lg-21{
        left: calc(var(--unitlenth) * 21 );
    }
    .row > .push-lg-22{
        left: calc(var(--unitlenth) * 22 );
    }
    .row > .push-lg-23{
        left: calc(var(--unitlenth) * 23 );
    }
/*屏幕 ≥ 992px时的元素左移*/
    .row > .pull-lg-1,
    .row > .pull-lg-2,
    .row > .pull-lg-3,
    .row > .pull-lg-4,
    .row > .pull-lg-5,
    .row > .pull-lg-6,
    .row > .pull-lg-7,
    .row > .pull-lg-8,
    .row > .pull-lg-9,
    .row > .pull-lg-10,
    .row > .pull-lg-11,
    .row > .pull-lg-12,
    .row > .pull-lg-13,
    .row > .pull-lg-14,
    .row > .pull-lg-15,
    .row > .pull-lg-16,
    .row > .pull-lg-17,
    .row > .pull-lg-18,
    .row > .pull-lg-19,
    .row > .pull-lg-20,
    .row > .pull-lg-21,
    .row > .pull-lg-22,
    .row > .pull-lg-23{
        position: relative;
    }
    .row > .pull-lg-1{
        right: calc(var(--unitlenth) * 1);
    }
    .row > .pull-lg-2{
        right: calc(var(--unitlenth) * 2);
    }
    .row > .pull-lg-3{
        right: calc(var(--unitlenth) * 3);
    }
    .row > .pull-lg-4{
        right: calc(var(--unitlenth) * 4);
    }
    .row > .pull-lg-5{
        right: calc(var(--unitlenth) * 5);
    }
    .row > .pull-lg-6{
        right: calc(var(--unitlenth) * 6);
    }
    .row > .pull-lg-7{
        right: calc(var(--unitlenth) * 7);
    }
    .row > .pull-lg-8{
        right: calc(var(--unitlenth) * 8);
    }
    .row > .pull-lg-9{
        right: calc(var(--unitlenth) * 9);
    }
    .row > .pull-lg-10{
        right: calc(var(--unitlenth) * 10);
    }
    .row > .pull-lg-11{
        right: calc(var(--unitlenth) * 11);
    }
    .row > .pull-lg-12{
        right: calc(var(--unitlenth) * 12);
    }
    .row > .pull-lg-13{
        right: calc(var(--unitlenth) * 13);
    }
    .row > .pull-lg-14{
        right: calc(var(--unitlenth) * 14);
    }
    .row > .pull-lg-15{
        right: calc(var(--unitlenth) * 15);
    }
    .row > .pull-lg-16{
        right: calc(var(--unitlenth) * 16);
    }
    .row > .pull-lg-17{
        right: calc(var(--unitlenth) * 17);
    }
    .row > .pull-lg-18{
        right: calc(var(--unitlenth) * 18);
    }
    .row > .pull-lg-19{
        right: calc(var(--unitlenth) * 19);
    }
    .row > .pull-lg-20{
        right: calc(var(--unitlenth) * 20);
    }
    .row > .pull-lg-21{
        right: calc(var(--unitlenth) * 21);
    }
    .row > .pull-lg-22{
        right: calc(var(--unitlenth) * 22);
    }
    .row > .pull-lg-23{
        right: calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 992px时的元素位置*/
    .row > .order-lg-1{
        order: 1;
    }
    .row > .order-lg-2{
        order: 2;
    }
    .row > .order-lg-3{
        order: 3;
    }
    .row > .order-lg-4{
        order: 4;
    }
    .row > .order-lg-5{
        order: 5;
    }
    .row > .order-lg-6{
        order: 6;
    }
    .row > .order-lg-7{
        order: 7;
    }
    .row > .order-lg-8{
        order: 8;
    }
    .row > .order-lg-9{
        order: 9;
    }
    .row > .order-lg-10{
        order: 10;
    }
    .row > .order-lg-11{
        order: 11;
    }
    .row > .order-lg-12{
        order: 12;
    }
    .row > .order-lg-13{
        order: 13;
    }
    .row > .order-lg-14{
        order: 14;
    }
    .row > .order-lg-15{
        order: 15;
    }
    .row > .order-lg-16{
        order: 16;
    }
    .row > .order-lg-17{
        order: 17;
    }
    .row > .order-lg-18{
        order: 18;
    }
    .row > .order-lg-19{
        order: 19;
    }
    .row > .order-lg-20{
        order: 20;
    }
    .row > .order-lg-21{
        order: 21;
    }
    .row > .order-lg-22{
        order: 22;
    }
    .row > .order-lg-23{
        order: 23;
    }
    .row > .order-lg-24{
        order: 24;
    }
}




/*屏幕 ≥ 1200px时的格式*/
@media screen and (min-width:1200px){
    .row > :not([class *="col-xl"]){
        width: 100%;
    }
    [class *="col-xl"]{
        flex: none;
        
    }
    body .row >div[class ~="col-xl-narrow"]{
        flex: none;
        width:max-content;
    }
    body .row > .col-xl-narrow{
        width: max-content;
    }
/*屏幕 ≥ 1200px时的对其方式应用于flex*/
    .justify-xl-start{
        justify-content: flex-start;
    }
    .justify-xl-center{
        justify-content: center;
    }
    .justify-xl-end{
        justify-content: flex-end;
    }
    .justify-xl-between{
        justify-content: space-between;
    }
    .justify-xl-around{
        justify-content: space-around;
    }
    .justify-xl-evenly{
        justify-content: space-evenly;
    }
    .align-xl-start{
        align-items: flex-start;
    }
    .align-xl-center{
        align-items: center;
    }
    .align-xl-end{
        align-items: flex-end;
    }
/*屏幕 ≥ 1200px时item对其方式应用于item*/
    .align-self-xl-start{
        align-self: flex-start;
    }
    .align-self-xl-center{
        align-self: center;
    }
    .align-self-xl-end{
        align-self: flex-end;
    }
/*屏幕 ≥ 1200px时的元素间隔*/
    .gutter-xl-4{
        gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-8{
        gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-12{
        gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-16{
        gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-20{
        gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-24{
        gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-28{
        gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xl-32{
        gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-4{
        column-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-8{
        column-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-12{
        column-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-16{
        column-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-20{
        column-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-24{
        column-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-28{
        column-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xl-32{
        column-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-4{
        row-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-8{
        row-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-12{
        row-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-16{
        row-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-20{
        row-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-24{
        row-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-28{
        row-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xl-32{
        row-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
/*屏幕 ≥ 1200px时的元素长度*/
    .row > .col-xl-1,
    .row > .col-xl-2,
    .row > .col-xl-3,
    .row > .col-xl-4,
    .row > .col-xl-5,
    .row > .col-xl-6,
    .row > .col-xl-7,
    .row > .col-xl-8,
    .row > .col-xl-9,
    .row > .col-xl-10,
    .row > .col-xl-11,
    .row > .col-xl-12,
    .row > .col-xl-13,
    .row > .col-xl-14,
    .row > .col-xl-15,
    .row > .col-xl-16,
    .row > .col-xl-17,
    .row > .col-xl-18,
    .row > .col-xl-19,
    .row > .col-xl-20,
    .row > .col-xl-21,
    .row > .col-xl-22,
    .row > .col-xl-23,
    .row > .col-xl-24{
        flex: none;
        min-width: 0;
    }
    .row > .col-xl-1{
        flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
    }
    .row > .col-xl-2{
        flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
    }
    .row > .col-xl-3{
        flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
    }
    .row > .col-xl-4{
        flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
    }
    .row > .col-xl-5{
        flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
    }
    .row > .col-xl-6{
        flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
    }
    .row > .col-xl-7{
        flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
    }
    .row > .col-xl-8{
        flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
    }
    .row > .col-xl-9{
        flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
    }
    .row > .col-xl-10{
        flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
    }
    .row > .col-xl-11{
        flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
    }
    .row > .col-xl-12{
        flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
    }
    .row > .col-xl-13{
        flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
    }
    .row > .col-xl-14{
        flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
    }
    .row > .col-xl-15{
        flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
    }
    .row > .col-xl-16{
        flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
    }
    .row > .col-xl-17{
        flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
    }
    .row > .col-xl-18{
        flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
    }
    .row > .col-xl-19{
        flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
    }
    .row > .col-xl-20{
        flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
    }
    .row > .col-xl-21{
        flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
    }
    .row > .col-xl-22{
        flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
    }
    .row > .col-xl-23{
        flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
    }
    .row > .col-xl-24{
        flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
    }
/*屏幕 ≥ 1200px时的元素边距*/
    .row > .offset-xl-1{
        margin-left:calc(var(--unitlenth) * 1 );
    }
    .row > .offset-xl-2{
        margin-left:calc(var(--unitlenth) * 2);
    }
    .row > .offset-xl-3{
        margin-left:calc(var(--unitlenth) * 3 );
    }
    .row > .offset-xl-4{
        margin-left:calc(var(--unitlenth) * 4 );
    }
    .row > .offset-xl-5{
        margin-left:calc(var(--unitlenth) * 5 );
    }
    .row > .offset-xl-6{
        margin-left:calc(var(--unitlenth) * 6 );
    }
    .row > .offset-xl-7{
        margin-left:calc(var(--unitlenth) * 7 );
    }
    .row > .offset-xl-8{
        margin-left:calc(var(--unitlenth) * 8 );
    }
    .row > .offset-xl-9{
        margin-left:calc(var(--unitlenth) * 9 );
    }
    .row > .offset-xl-10{
        margin-left:calc(var(--unitlenth) * 10);
    }
    .row > .offset-xl-11{
        margin-left:calc(var(--unitlenth) * 11);
    }
    .row > .offset-xl-12{
        margin-left:calc(var(--unitlenth) * 12);
    }
    .row > .offset-xl-13{
        margin-left:calc(var(--unitlenth) * 13);
    }
    .row > .offset-xl-14{
        margin-left:calc(var(--unitlenth) * 14);
    }
    .row > .offset-xl-15{
        margin-left:calc(var(--unitlenth) * 15);
    }
    .row > .offset-xl-16{
        margin-left:calc(var(--unitlenth) * 16);
    }
    .row > .offset-xl-17{
        margin-left:calc(var(--unitlenth) * 17);
    }
    .row > .offset-xl-18{
        margin-left:calc(var(--unitlenth) * 18);
    }
    .row > .offset-xl-19{
        margin-left:calc(var(--unitlenth) * 19);
    }
    .row > .offset-xl-20{
        margin-left:calc(var(--unitlenth) * 20);
    }
    .row > .offset-xl-21{
        margin-left:calc(var(--unitlenth) * 21);
    }
    .row > .offset-xl-22{
        margin-left:calc(var(--unitlenth) * 22);
    }
    .row > .offset-xl-23{
        margin-left:calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 1200px时的元素右移*/
    .row > .push-xl-1,
    .row > .push-xl-2,
    .row > .push-xl-3,
    .row > .push-xl-4,
    .row > .push-xl-5,
    .row > .push-xl-6,
    .row > .push-xl-7,
    .row > .push-xl-8,
    .row > .push-xl-9,
    .row > .push-xl-10,
    .row > .push-xl-11,
    .row > .push-xl-12,
    .row > .push-xl-13,
    .row > .push-xl-14,
    .row > .push-xl-15,
    .row > .push-xl-16,
    .row > .push-xl-17,
    .row > .push-xl-18,
    .row > .push-xl-19,
    .row > .push-xl-20,
    .row > .push-xl-21,
    .row > .push-xl-22,
    .row > .push-xl-23{
        position: relative;
    }
    .row > .push-xl-1{
        left: calc(var(--unitlenth) * 1 );
    }
    .row > .push-xl-2{
        left: calc(var(--unitlenth) * 2 );
    }
    .row > .push-xl-3{
        left: calc(var(--unitlenth) * 3 );
    }
    .row > .push-xl-4{
        left: calc(var(--unitlenth) * 4 );
    }
    .row > .push-xl-5{
        left: calc(var(--unitlenth) * 5 );
    }
    .row > .push-xl-6{
        left: calc(var(--unitlenth) * 6 );
    }
    .row > .push-xl-7{
        left: calc(var(--unitlenth) * 7 );
    }
    .row > .push-xl-8{
        left: calc(var(--unitlenth) * 8 );
    }
    .row > .push-xl-9{
        left: calc(var(--unitlenth) * 9 );
    }
    .row > .push-xl-10{
        left: calc(var(--unitlenth) * 10 );
    }
    .row > .push-xl-11{
        left: calc(var(--unitlenth) * 11 );
    }
    .row > .push-xl-12{
        left: calc(var(--unitlenth) * 12 );
    }
    .row > .push-xl-13{
        left: calc(var(--unitlenth) * 13 );
    }
    .row > .push-xl-14{
        left: calc(var(--unitlenth) * 14 );
    }
    .row > .push-xl-15{
        left: calc(var(--unitlenth) * 15 );
    }
    .row > .push-xl-16{
        left: calc(var(--unitlenth) * 16 );
    }
    .row > .push-xl-17{
        left: calc(var(--unitlenth) * 17 );
    }
    .row > .push-xl-18{
        left: calc(var(--unitlenth) * 18 );
    }
    .row > .push-xl-19{
        left: calc(var(--unitlenth) * 19 );
    }
    .row > .push-xl-20{
        left: calc(var(--unitlenth) * 20 );
    }
    .row > .push-xl-21{
        left: calc(var(--unitlenth) * 21 );
    }
    .row > .push-xl-22{
        left: calc(var(--unitlenth) * 22 );
    }
    .row > .push-xl-23{
        left: calc(var(--unitlenth) * 23 );
    }
/*屏幕 ≥ 1200px时的元素左移*/
    .row > .pull-xl-1,
    .row > .pull-xl-2,
    .row > .pull-xl-3,
    .row > .pull-xl-4,
    .row > .pull-xl-5,
    .row > .pull-xl-6,
    .row > .pull-xl-7,
    .row > .pull-xl-8,
    .row > .pull-xl-9,
    .row > .pull-xl-10,
    .row > .pull-xl-11,
    .row > .pull-xl-12,
    .row > .pull-xl-13,
    .row > .pull-xl-14,
    .row > .pull-xl-15,
    .row > .pull-xl-16,
    .row > .pull-xl-17,
    .row > .pull-xl-18,
    .row > .pull-xl-19,
    .row > .pull-xl-20,
    .row > .pull-xl-21,
    .row > .pull-xl-22,
    .row > .pull-xl-23{
        position: relative;
    }
    .row > .pull-xl-1{
        right: calc(var(--unitlenth) * 1);
    }
    .row > .pull-xl-2{
        right: calc(var(--unitlenth) * 2);
    }
    .row > .pull-xl-3{
        right: calc(var(--unitlenth) * 3);
    }
    .row > .pull-xl-4{
        right: calc(var(--unitlenth) * 4);
    }
    .row > .pull-xl-5{
        right: calc(var(--unitlenth) * 5);
    }
    .row > .pull-xl-6{
        right: calc(var(--unitlenth) * 6);
    }
    .row > .pull-xl-7{
        right: calc(var(--unitlenth) * 7);
    }
    .row > .pull-xl-8{
        right: calc(var(--unitlenth) * 8);
    }
    .row > .pull-xl-9{
        right: calc(var(--unitlenth) * 9);
    }
    .row > .pull-xl-10{
        right: calc(var(--unitlenth) * 10);
    }
    .row > .pull-xl-11{
        right: calc(var(--unitlenth) * 11);
    }
    .row > .pull-xl-12{
        right: calc(var(--unitlenth) * 12);
    }
    .row > .pull-xl-13{
        right: calc(var(--unitlenth) * 13);
    }
    .row > .pull-xl-14{
        right: calc(var(--unitlenth) * 14);
    }
    .row > .pull-xl-15{
        right: calc(var(--unitlenth) * 15);
    }
    .row > .pull-xl-16{
        right: calc(var(--unitlenth) * 16);
    }
    .row > .pull-xl-17{
        right: calc(var(--unitlenth) * 17);
    }
    .row > .pull-xl-18{
        right: calc(var(--unitlenth) * 18);
    }
    .row > .pull-xl-19{
        right: calc(var(--unitlenth) * 19);
    }
    .row > .pull-xl-20{
        right: calc(var(--unitlenth) * 20);
    }
    .row > .pull-xl-21{
        right: calc(var(--unitlenth) * 21);
    }
    .row > .pull-xl-22{
        right: calc(var(--unitlenth) * 22);
    }
    .row > .pull-xl-23{
        right: calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 1200px时的元素位置*/
    .row > .order-xl-1{
        order: 1;
    }
    .row > .order-xl-2{
        order: 2;
    }
    .row > .order-xl-3{
        order: 3;
    }
    .row > .order-xl-4{
        order: 4;
    }
    .row > .order-xl-5{
        order: 5;
    }
    .row > .order-xl-6{
        order: 6;
    }
    .row > .order-xl-7{
        order: 7;
    }
    .row > .order-xl-8{
        order: 8;
    }
    .row > .order-xl-9{
        order: 9;
    }
    .row > .order-xl-10{
        order: 10;
    }
    .row > .order-xl-11{
        order: 11;
    }
    .row > .order-xl-12{
        order: 12;
    }
    .row > .order-xl-13{
        order: 13;
    }
    .row > .order-xl-14{
        order: 14;
    }
    .row > .order-xl-15{
        order: 15;
    }
    .row > .order-xl-16{
        order: 16;
    }
    .row > .order-xl-17{
        order: 17;
    }
    .row > .order-xl-18{
        order: 18;
    }
    .row > .order-xl-19{
        order: 19;
    }
    .row > .order-xl-20{
        order: 20;
    }
    .row > .order-xl-21{
        order: 21;
    }
    .row > .order-xl-22{
        order: 22;
    }
    .row > .order-xl-23{
        order: 23;
    }
    .row > .order-xl-24{
        order: 24;
    }
}




/*屏幕 ≥ 1600px时的格式*/
@media screen and (min-width:1600px){
    .row > :not([class *="col-xxl"]){
        width: 100%;
    }
    [class *="col-xxl"]{
        flex: none;
        
    }
    body .row >div[class ~="col-xxl-narrow"]{
        flex: none;
        width:max-content;
    }
    body .row > .col-xxl-narrow{
        width: max-content;
    }
/*屏幕 ≥ 1600px时的对其方式应用于flex*/
    .justify-xxl-start{
        justify-content: flex-start;
    }
    .justify-xxl-center{
        justify-content: center;
    }
    .justify-xxl-end{
        justify-content: flex-end;
    }
    .justify-xxl-between{
        justify-content: space-between;
    }
    .justify-xxl-around{
        justify-content: space-around;
    }
    .justify-xxl-evenly{
        justify-content: space-evenly;
    }
    .align-xxl-start{
        align-items: flex-start;
    }
    .align-xxl-center{
        align-items: center;
    }
    .align-xxl-end{
        align-items: flex-end;
    }
/*屏幕 ≥ 1600px时item对其方式应用于item*/
    .align-self-xxl-start{
        align-self: flex-start;
    }
    .align-self-xxl-center{
        align-self: center;
    }
    .align-self-xxl-end{
        align-self: flex-end;
    }
/*屏幕 ≥ 1600px时的元素间隔*/
    .gutter-xxl-4{
        gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-8{
        gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-12{
        gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-16{
        gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-20{
        gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-24{
        gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-xxl-28{
        gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutte-xxl-32{
        gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-4{
        column-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-8{
        column-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-12{
        column-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-16{
        column-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-20{
        column-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-24{
        column-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-28{
        column-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-column-xxl-32{
        column-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-4{
        row-gap: 4px;
        --gap:4px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-8{
        row-gap: 8px;
        --gap:8px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-12{
        row-gap: 12px;
        --gap:12px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-16{
        row-gap: 16px;
        --gap:16px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-20{
        row-gap: 20px;
        --gap:20px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-24{
        row-gap: 24px;
        --gap:24px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-28{
        row-gap: 28px;
        --gap:28px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
    .gutter-row-xxl-32{
        row-gap: 32px;
        --gap:32px;
        --gapless:calc( calc(100% + var(--gap)) / 24);
    }
/*屏幕 ≥ 1600px时的元素长度*/
    .row > .col-xxl-1,
    .row > .col-xxl-2,
    .row > .col-xxl-3,
    .row > .col-xxl-4,
    .row > .col-xxl-5,
    .row > .col-xxl-6,
    .row > .col-xxl-7,
    .row > .col-xxl-8,
    .row > .col-xxl-9,
    .row > .col-xxl-10,
    .row > .col-xxl-11,
    .row > .col-xxl-12,
    .row > .col-xxl-13,
    .row > .col-xxl-14,
    .row > .col-xxl-15,
    .row > .col-xxl-16,
    .row > .col-xxl-17,
    .row > .col-xxl-18,
    .row > .col-xxl-19,
    .row > .col-xxl-20,
    .row > .col-xxl-21,
    .row > .col-xxl-22,
    .row > .col-xxl-23,
    .row > .col-xxl-24{
        flex: none;
        min-width: 0;
    }
    .row > .col-xxl-1{
        flex-basis: calc(calc(var(--gapless) * 1) - var(--gap));
    }
    .row > .col-xxl-2{
        flex-basis: calc(calc(var(--gapless) * 2) - var(--gap));
    }
    .row > .col-xxl-3{
        flex-basis: calc(calc(var(--gapless) * 3) - var(--gap));
    }
    .row > .col-xxl-4{
        flex-basis: calc(calc(var(--gapless) * 4) - var(--gap));
    }
    .row > .col-xxl-5{
        flex-basis: calc(calc(var(--gapless) * 5) - var(--gap));
    }
    .row > .col-xxl-6{
        flex-basis: calc(calc(var(--gapless) * 6) - var(--gap));
    }
    .row > .col-xxl-7{
        flex-basis: calc(calc(var(--gapless) * 7) - var(--gap));
    }
    .row > .col-xxl-8{
        flex-basis: calc(calc(var(--gapless) * 8) - var(--gap));
    }
    .row > .col-xxl-9{
        flex-basis: calc(calc(var(--gapless) * 9) - var(--gap));
    }
    .row > .col-xxl-10{
        flex-basis: calc(calc(var(--gapless) * 10) - var(--gap));
    }
    .row > .col-xxl-11{
        flex-basis: calc(calc(var(--gapless) * 11) - var(--gap));
    }
    .row > .col-xxl-12{
        flex-basis: calc(calc(var(--gapless) * 12) - var(--gap));
    }
    .row > .col-xxl-13{
        flex-basis: calc(calc(var(--gapless) * 13) - var(--gap));
    }
    .row > .col-xxl-14{
        flex-basis: calc(calc(var(--gapless) * 14) - var(--gap));
    }
    .row > .col-xxl-15{
        flex-basis: calc(calc(var(--gapless) * 15) - var(--gap));
    }
    .row > .col-xxl-16{
        flex-basis: calc(calc(var(--gapless) * 16) - var(--gap));
    }
    .row > .col-xxl-17{
        flex-basis: calc(calc(var(--gapless) * 17) - var(--gap));
    }
    .row > .col-xxl-18{
        flex-basis: calc(calc(var(--gapless) * 18) - var(--gap));
    }
    .row > .col-xxl-19{
        flex-basis: calc(calc(var(--gapless) * 19) - var(--gap));
    }
    .row > .col-xxl-20{
        flex-basis: calc(calc(var(--gapless) * 20) - var(--gap));
    }
    .row > .col-xxl-21{
        flex-basis: calc(calc(var(--gapless) * 21) - var(--gap));
    }
    .row > .col-xxl-22{
        flex-basis: calc(calc(var(--gapless) * 22) - var(--gap));
    }
    .row > .col-xxl-23{
        flex-basis: calc(calc(var(--gapless) * 23) - var(--gap));
    }
    .row > .col-xxl-24{
        flex-basis: calc(calc(var(--gapless) * 24) - var(--gap));
    }
/*屏幕 ≥ 1600px时的元素边距*/
    .row > .offset-xxl-1{
        margin-left:calc(var(--unitlenth) * 1 );
    }
    .row > .offset-xxl-2{
        margin-left:calc(var(--unitlenth) * 2);
    }
    .row > .offset-xxl-3{
        margin-left:calc(var(--unitlenth) * 3 );
    }
    .row > .offset-xxl-4{
        margin-left:calc(var(--unitlenth) * 4 );
    }
    .row > .offset-xxl-5{
        margin-left:calc(var(--unitlenth) * 5 );
    }
    .row > .offset-xxl-6{
        margin-left:calc(var(--unitlenth) * 6 );
    }
    .row > .offset-xxl-7{
        margin-left:calc(var(--unitlenth) * 7 );
    }
    .row > .offset-xxl-8{
        margin-left:calc(var(--unitlenth) * 8 );
    }
    .row > .offset-xxl-9{
        margin-left:calc(var(--unitlenth) * 9 );
    }
    .row > .offset-xxl-10{
        margin-left:calc(var(--unitlenth) * 10);
    }
    .row > .offset-xxl-11{
        margin-left:calc(var(--unitlenth) * 11);
    }
    .row > .offset-xxl-12{
        margin-left:calc(var(--unitlenth) * 12);
    }
    .row > .offset-xxl-13{
        margin-left:calc(var(--unitlenth) * 13);
    }
    .row > .offset-xxl-14{
        margin-left:calc(var(--unitlenth) * 14);
    }
    .row > .offset-xxl-15{
        margin-left:calc(var(--unitlenth) * 15);
    }
    .row > .offset-xxl-16{
        margin-left:calc(var(--unitlenth) * 16);
    }
    .row > .offset-xxl-17{
        margin-left:calc(var(--unitlenth) * 17);
    }
    .row > .offset-xxl-18{
        margin-left:calc(var(--unitlenth) * 18);
    }
    .row > .offset-xxl-19{
        margin-left:calc(var(--unitlenth) * 19);
    }
    .row > .offset-xxl-20{
        margin-left:calc(var(--unitlenth) * 20);
    }
    .row > .offset-xxl-21{
        margin-left:calc(var(--unitlenth) * 21);
    }
    .row > .offset-xxl-22{
        margin-left:calc(var(--unitlenth) * 22);
    }
    .row > .offset-xxl-23{
        margin-left:calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 1600px时的元素右移*/
    .row > .push-xxl-1,
    .row > .push-xxl-2,
    .row > .push-xxl-3,
    .row > .push-xxl-4,
    .row > .push-xxl-5,
    .row > .push-xxl-6,
    .row > .push-xxl-7,
    .row > .push-xxl-8,
    .row > .push-xxl-9,
    .row > .push-xxl-10,
    .row > .push-xxl-11,
    .row > .push-xxl-12,
    .row > .push-xxl-13,
    .row > .push-xxl-14,
    .row > .push-xxl-15,
    .row > .push-xxl-16,
    .row > .push-xxl-17,
    .row > .push-xxl-18,
    .row > .push-xxl-19,
    .row > .push-xxl-20,
    .row > .push-xxl-21,
    .row > .push-xxl-22,
    .row > .push-xxl-23{
        position: relative;
    }
    .row > .push-xxl-1{
        left: calc(var(--unitlenth) * 1 );
    }
    .row > .push-xxl-2{
        left: calc(var(--unitlenth) * 2 );
    }
    .row > .push-xxl-3{
        left: calc(var(--unitlenth) * 3 );
    }
    .row > .push-xxl-4{
        left: calc(var(--unitlenth) * 4 );
    }
    .row > .push-xxl-5{
        left: calc(var(--unitlenth) * 5 );
    }
    .row > .push-xxl-6{
        left: calc(var(--unitlenth) * 6 );
    }
    .row > .push-xxl-7{
        left: calc(var(--unitlenth) * 7 );
    }
    .row > .push-xxl-8{
        left: calc(var(--unitlenth) * 8 );
    }
    .row > .push-xxl-9{
        left: calc(var(--unitlenth) * 9 );
    }
    .row > .push-xxl-10{
        left: calc(var(--unitlenth) * 10 );
    }
    .row > .push-xxl-11{
        left: calc(var(--unitlenth) * 11 );
    }
    .row > .push-xxl-12{
        left: calc(var(--unitlenth) * 12 );
    }
    .row > .push-xxl-13{
        left: calc(var(--unitlenth) * 13 );
    }
    .row > .push-xxl-14{
        left: calc(var(--unitlenth) * 14 );
    }
    .row > .push-xxl-15{
        left: calc(var(--unitlenth) * 15 );
    }
    .row > .push-xxl-16{
        left: calc(var(--unitlenth) * 16 );
    }
    .row > .push-xxl-17{
        left: calc(var(--unitlenth) * 17 );
    }
    .row > .push-xxl-18{
        left: calc(var(--unitlenth) * 18 );
    }
    .row > .push-xxl-19{
        left: calc(var(--unitlenth) * 19 );
    }
    .row > .push-xxl-20{
        left: calc(var(--unitlenth) * 20 );
    }
    .row > .push-xxl-21{
        left: calc(var(--unitlenth) * 21 );
    }
    .row > .push-xxl-22{
        left: calc(var(--unitlenth) * 22 );
    }
    .row > .push-xxl-23{
        left: calc(var(--unitlenth) * 23 );
    }
/*屏幕 ≥ 1600px时的元素左移*/
    .row > .pull-xxl-1,
    .row > .pull-xxl-2,
    .row > .pull-xxl-3,
    .row > .pull-xxl-4,
    .row > .pull-xxl-5,
    .row > .pull-xxl-6,
    .row > .pull-xxl-7,
    .row > .pull-xxl-8,
    .row > .pull-xxl-9,
    .row > .pull-xxl-10,
    .row > .pull-xxl-11,
    .row > .pull-xxl-12,
    .row > .pull-xxl-13,
    .row > .pull-xxl-14,
    .row > .pull-xxl-15,
    .row > .pull-xxl-16,
    .row > .pull-xxl-17,
    .row > .pull-xxl-18,
    .row > .pull-xxl-19,
    .row > .pull-xxl-20,
    .row > .pull-xxl-21,
    .row > .pull-xxl-22,
    .row > .pull-xxl-23{
        position: relative;
    }
    .row > .pull-xxl-1{
        right: calc(var(--unitlenth) * 1);
    }
    .row > .pull-xxl-2{
        right: calc(var(--unitlenth) * 2);
    }
    .row > .pull-xxl-3{
        right: calc(var(--unitlenth) * 3);
    }
    .row > .pull-xxl-4{
        right: calc(var(--unitlenth) * 4);
    }
    .row > .pull-xxl-5{
        right: calc(var(--unitlenth) * 5);
    }
    .row > .pull-xxl-6{
        right: calc(var(--unitlenth) * 6);
    }
    .row > .pull-xxl-7{
        right: calc(var(--unitlenth) * 7);
    }
    .row > .pull-xxl-8{
        right: calc(var(--unitlenth) * 8);
    }
    .row > .pull-xxl-9{
        right: calc(var(--unitlenth) * 9);
    }
    .row > .pull-xxl-10{
        right: calc(var(--unitlenth) * 10);
    }
    .row > .pull-xxl-11{
        right: calc(var(--unitlenth) * 11);
    }
    .row > .pull-xxl-12{
        right: calc(var(--unitlenth) * 12);
    }
    .row > .pull-xxl-13{
        right: calc(var(--unitlenth) * 13);
    }
    .row > .pull-xxl-14{
        right: calc(var(--unitlenth) * 14);
    }
    .row > .pull-xxl-15{
        right: calc(var(--unitlenth) * 15);
    }
    .row > .pull-xxl-16{
        right: calc(var(--unitlenth) * 16);
    }
    .row > .pull-xxl-17{
        right: calc(var(--unitlenth) * 17);
    }
    .row > .pull-xxl-18{
        right: calc(var(--unitlenth) * 18);
    }
    .row > .pull-xxl-19{
        right: calc(var(--unitlenth) * 19);
    }
    .row > .pull-xxl-20{
        right: calc(var(--unitlenth) * 20);
    }
    .row > .pull-xxl-21{
        right: calc(var(--unitlenth) * 21);
    }
    .row > .pull-xxl-22{
        right: calc(var(--unitlenth) * 22);
    }
    .row > .pull-xxl-23{
        right: calc(var(--unitlenth) * 23);
    }
/*屏幕 ≥ 1600px时的元素位置*/
    .row > .order-xxl-1{
        order: 1;
    }
    .row > .order-xxl-2{
        order: 2;
    }
    .row > .order-xxl-3{
        order: 3;
    }
    .row > .order-xxl-4{
        order: 4;
    }
    .row > .order-xxl-5{
        order: 5;
    }
    .row > .order-xxl-6{
        order: 6;
    }
    .row > .order-xxl-7{
        order: 7;
    }
    .row > .order-xxl-8{
        order: 8;
    }
    .row > .order-xxl-9{
        order: 9;
    }
    .row > .order-xxl-10{
        order: 10;
    }
    .row > .order-xxl-11{
        order: 11;
    }
    .row > .order-xxl-12{
        order: 12;
    }
    .row > .order-xxl-13{
        order: 13;
    }
    .row > .order-xxl-14{
        order: 14;
    }
    .row > .order-xxl-15{
        order: 15;
    }
    .row > .order-xxl-16{
        order: 16;
    }
    .row > .order-xxl-17{
        order: 17;
    }
    .row > .order-xxl-18{
        order: 18;
    }
    .row > .order-xxl-19{
        order: 19;
    }
    .row > .order-xxl-20{
        order: 20;
    }
    .row > .order-xxl-21{
        order: 21;
    }
    .row > .order-xxl-22{
        order: 22;
    }
    .row > .order-xxl-23{
        order: 23;
    }
    .row > .order-xxl-24{
        order: 24;
    }
}






